<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-06-21 16:20:03
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-22 11:28:30
 * @FilePath: \nien-vue3-admin\src\views\myMission\businessHandling\processApplication\components\Accounting.vue
 * @Description: 特殊产品组件
-->
<template>
  <div>
    <el-row class="mb8">
      <el-col>
        <el-button type="primary" class="mb8" @click="onAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="computedTable">
      <el-table-column v-for="column in tableColumns" v-bind="column" :key="column.prop"></el-table-column>
      <el-table-column label="操作" class-name="custormFixedCol">
        <template #default="{row,$index}">
          <el-button text type="primary" @click="del($index)">删除</el-button>
          <el-button text type="primary" @click="update(row,$index)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="open"
      :title="title"
      :close-on-click-modal="false"
      :before-close="()=>cancel()"
    >
      <el-form
        ref="formRef"
        :rules="rules"
        :model="form"
        inline
        label-width="110px"
      >
        <el-form-item label="结算模式" prop="settlementModel">
          <el-select
            v-model="form.settlementModel"
            size="small"
            placeholder="请选择结算模式"
            clearable
            style="width: 256px;"
          >
            <el-option
              v-for="(dict) in clientMangerSettlementMode"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授信额度" prop="lineCredit">
          <el-input-number
            v-model="form.lineCredit"
            style="width: 256px;"
            size="small"
            :controls="false"
            clearable
            placeholder="请输入授信额度"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="账单付款天数" prop="billPaymentDay">
          <el-input-number
            v-model="form.billPaymentDay"
            style="width: 256px;"
            size="small"
            :controls="false"
            clearable
            placeholder="请输入账单付款天数"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang='ts' setup>
import { ref, computed } from 'vue'
import { selectDictLabel, useDicts, resetForm, validateForm } from '@/utils'
import { DictDirection } from '@/store/modules/dicts'

const { 
  [DictDirection.客户结算模式]: clientMangerSettlementMode, 
} = useDicts([DictDirection.客户结算模式])
let type = 'add', updateIndex = null
const tableColumns = [
    { label: '结算模式', prop: 'settlementModel', align: 'center', formatter: (row) => selectDictLabel(clientMangerSettlementMode.value, row.settlementModel) },
    { label: '授信额度', prop: 'lineCredit', align: 'center' },
    { label: '账单付款天数', prop: 'billPaymentDay', align: 'center' },
  ], open = ref(false), title = ref(), rules = {
    settlementModel: [{ required: true, message: '结算模式不能为空', trigger: ['change'] }],
    lineCredit: [{ required: true, message: '授信额度不能为空', trigger: ['blur'] }],
    days: [{ required: true, message: '天数不能为空', trigger: ['blur'] }],
  }, form = ref({
    settlementModel: undefined,
    lineCredit: undefined,
    billPaymentDay: undefined,
  }), submit = () => {
    validateForm(formRef.value, () => {
      if (type === 'add') {
        computedTable.value.push(JSON.parse(JSON.stringify(form.value)))
      } else if (type === 'update') {
        computedTable.value[updateIndex] = JSON.parse(JSON.stringify(form.value))
      }
      cancel()
    })
  }, cancel = () => {
    resetForm(formRef.value)
    open.value = false
    return true
  }, onAdd = () => {
    open.value = true
    type = 'add'
  }, formRef = ref(null),
  emits = defineEmits(['update:modelValue']),
  props = withDefaults(defineProps<{
    modelValue:unknown[]
  }>(), {
    modelValue: () => [],
  }), computedTable = computed<any[]>({
    set(v) {
      emits('update:modelValue', v)
    },
    get() {
      return props.modelValue
    },
  }), del = (key) => {
    computedTable.value.splice(key, 1)
  }, update = (row, key) => {
    form.value = JSON.parse(JSON.stringify(row))
    type = 'update'
    updateIndex = key
    open.value = true
  }
  
</script> 
<!-- <style lang='less' scoped>
</style> -->